@import "Layer.less";
@import "../../src/css/Select.less";

@esui-select-color: @esui-palette-color;
@esui-select-background: @esui-palette-neutral-color;
@esui-select-hover-background: @esui-palette-neutral-highlight-color;
@esui-select-active-background: @esui-palette-neutral-shadow-color;

@esui-select-invalid-border: 1px solid @esui-palette-danger-color;

@esui-select-primary-color: @esui-palette-contrast-color;
@esui-select-primary-background: @esui-palette-primary-color;
@esui-select-primary-hover-background: @esui-palette-primary-highlight-color;
@esui-select-primary-active-background: @esui-palette-primary-shadow-color;

@esui-select-item-selected-color: @esui-palette-color;
@esui-select-item-selected-background: @esui-palette-neutral-highlight-color;

@esui-select-compact-color: @esui-palette-color;
@esui-select-compact-background: @esui-palette-white;
@esui-select-compact-height: 1.5em;
@esui-select-compact-padding: .5em;

@esui-select-compact-layer-item-padding: .3em;
@esui-select-compact-layer-item-select-background: @esui-palette-neutral-highlight-color;
@esui-select-compact-layer-item-select-color: @esui-palette-color;
@esui-select-compact-layer-background: @esui-palette-white;

@esui-select-bordered-color: @esui-palette-color;
@esui-select-bordered-background: @esui-palette-white;
@esui-select-bordered-border-color: @esui-palette-border;

.esui-select-theme() {
    .esui-select-variant(
        @esui-select-background,
        @esui-select-hover-background,
        @esui-select-color,
        @esui-select-color,
        @esui-select-background,
        @esui-select-color,
        @esui-select-active-background
    );
}

.esui-select-primary-theme() {
    .esui-select-variant(
        @esui-select-primary-background,
        @esui-select-primary-hover-background,
        @esui-select-primary-color,
        @esui-select-primary-color,
        @esui-select-primary-background,
        @esui-select-primary-color,
        @esui-select-primary-active-background
    );
}

.esui-select-compact-theme() {
    padding: 0 @esui-select-compact-padding;
    height: @esui-select-compact-height;
    line-height: @esui-select-compact-height;

    .esui-select-variant(
        @esui-select-compact-background,
        @esui-select-compact-background,
        @esui-select-compact-color,
        @esui-select-compact-color,
        @esui-select-compact-background,
        @esui-select-compact-color,
        @esui-select-compact-background
    );
    .esui-border-radius(0, @esui-select-radius);

    .@{ui-class-prefix}-select-arrow {
        line-height: @esui-select-compact-height;
        right: @esui-select-compact-padding;
        .opacity(70);
        &:hover {
            .opacity(100);
        }
    }
}

.esui-select-layer-compact-theme() {
    li :first-child {
        padding: @esui-select-compact-layer-item-padding;
    }
    .@{ui-class-prefix}-select-item-selected > :first-child {
        background: @esui-select-compact-layer-item-select-background;
        color: @esui-select-compact-layer-item-select-color;
    }
}

.esui-select-bordered-theme() {
    .esui-select-variant(
        @esui-select-bordered-background,
        @esui-select-bordered-background,
        @esui-select-bordered-color,
        @esui-select-bordered-color,
        @esui-select-bordered-background,
        @esui-select-bordered-color,
        @esui-select-bordered-background
    );
    border: 1px solid @esui-select-bordered-border-color;

    .@{ui-class-prefix}-select-arrow {
        .opacity(70);
        &:hover {
            .opacity(100);
        }
    }
}

.esui-select-layer-bordered-theme() {
    border: 1px solid @esui-select-bordered-border-color;
    background: @esui-select-bordered-background;
}

.esui-select-item-selected-theme() {
    background: @esui-select-item-selected-background;
    color: @esui-select-item-selected-color !important;
}

.esui-select-variant(
    @select-background,
    @select-hover-background,
    @select-color,
    @select-hover-color,
    @select-readonly-background,
    @select-readonly-color,
    @select-active-color
) {
    background: @select-background;
    color: @select-color;

    &:hover,
    &:focus {
        color: @select-hover-color;
        background: @select-hover-background;
    }

    &.@{ui-state-prefix}-read-only,
    &.@{ui-state-prefix}-read-only:hover {
        background: @select-readonly-background;
    }

    &.@{ui-state-prefix}-active {
        background: @select-active-color;
    }
}
